<template>
  <div id="BaseInformation">
    <!-- 个人基本信息 -->
    <div class="Header-wrapper">
      <yd-navbar title="编辑个人信息" fontsize="16px" color="#fff" height="45px" bgcolor="#ffd602">
         <div @click="go" slot="left">
                    <i class="iconfont icon-back Fcolor"></i>
                </div>
        <div class="release-right" slot="right" @click="save">保存</div>
      </yd-navbar>
    </div>
    <!-- 表单 -->
    <div class="BaseInformation-form">
      <div class="from-wrapper">
          <group>
            <yd-cell-item>
              <span slot="left">&nbsp;简历头像</span>
                <div slot="right" class="userimg">
                    <img src="@/assets/img/touxiang.png">
                </div>
            </yd-cell-item>
          </group>
          <yd-cell-group>
            <yd-cell-item>
              <span slot="left"> <i>*</i> 姓名</span>
              <yd-input slot="right" required :show-required-icon='false' :show-clear-icon="true" :show-success-icon='false' v-model="name" aceholder="请填写"></yd-input>
            </yd-cell-item>
          </yd-cell-group>
          <yd-cell-group>
            <yd-cell-item>
              <span slot="left"> <i>*</i> 身份证号：</span>
              <yd-input slot="right" v-model="IdNumber" :show-success-icon='false' max="18"  placeholder="请填写"></yd-input>
            </yd-cell-item>
          </yd-cell-group>
          <yd-cell-group>
            <yd-cell-item>
            <span slot="left"> <i>*</i> 持卡人：</span>
            <yd-input slot="right" v-model="BankUserName" :show-success-icon='false' placeholder="请填写持卡人姓名"></yd-input>
          </yd-cell-item>
          </yd-cell-group>
          <yd-cell-group>
             <yd-cell-item>
            <span slot="left"> <i>*</i> 银行：</span>
            <yd-input slot="right" v-model="BankName" :show-success-icon='false' placeholder="请填写"></yd-input>
          </yd-cell-item>
          </yd-cell-group>
         <yd-cell-group>
            <yd-cell-item>
            <span slot="left"> <i>*</i> 银行卡号：</span>
            <yd-input slot="right"  :show-success-icon='false' v-model="bankNumber" regex="bankcard"  placeholder="请填写"></yd-input>
          </yd-cell-item>
         </yd-cell-group>

          <group>
            <span class="span"><i>*</i>&nbsp;生日</span>
            <datetime v-model="birthday" :min-year="yearB"></datetime>
          </group>
          <group>
            <span class="span"><i>*</i>&nbsp;性别</span>
            <popup-picker  :data="['男女'.split('')]" placeholder="请填写" v-model="value"></popup-picker>
          </group>
          <group>
            <yd-cell-group>
                <yd-cell-item arrow>
                    <span slot="left"><i>*</i>&nbsp;选择学校：</span>
                    <input slot="right" type="text" @click.stop="showUni = true" v-model="deptname" readonly placeholder="请选择所在校区">
                </yd-cell-item>
            </yd-cell-group>
            <yd-cityselect v-model="showUni" ref="cityselectDemo" :callback="result2" :items="arr" title='所在校区' chooseTitle='请选择' columns=2></yd-cityselect>
          </group>
          <group>
            <yd-cell-item>
              <span slot="left"><i>*</i>&nbsp;手机号：</span>
              <yd-input :show-success-icon='false' slot="right" regex="mobile" placeholder="请输入手机号码" v-model="phone"></yd-input>
            </yd-cell-item>
          </group>
          <group>
            <yd-cell-item>
              <span slot="left"><i class="i">*</i>&nbsp;邮箱：</span>
              <yd-input :show-success-icon='false' slot="right" :debug="true" regex="email" placeholder="请输入邮箱地址" v-model="email"></yd-input>
            </yd-cell-item>
          </group>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
// import District from 'ydui-district/dist/jd_province_city_area_id'
import {
  PopupPicker,
  Datetime,
  Group,
  Cell,
  Picker
} from 'vux'
import apis from '../../../../../static/js/apis.js'
export default {
  data () {
    return {
      arr: [
        {
          v: '1',
          n: ' 请选择',
          c: [
            {
              v: '',
              n: ''
            },
            {
              v: '',
              n: ''
            }
          ]
        }
      ],
      yearB: 1900,
      bd: '',
      showUni: false,
      model2: '',
      // district: District,
      Data: [],
      list: [],
      deptname: [],
      name: '',
      IdNumber: '',
      bankNumber: '',
      BankName: '',
      sex: '',
      show: false,
      date: '',
      value: [],
      Arrs: ['iphone'],
      phone: '',
      email: '',
      nowIndex: 0,
      nowIndex0: 0,
      datetime: '2018-06-01',
      show2: false,
      show3: false,
      birthday: '请选择',
      address: [],
      deptid: '',
      deptname1: '',
      BankUserName: ''
    }
  },
  created () {
    this.name = JSON.parse(window.localStorage.getItem('userInfo')).member.name
    this.IdNumber = JSON.parse(
      window.localStorage.getItem('userInfo')
    ).member.idNumber
    this.BankUserName = JSON.parse(
      window.localStorage.getItem('userInfo')
    ).member.cardholder // 持卡人信息
    this.BankName = JSON.parse(
      window.localStorage.getItem('userInfo')
    ).member.bankName
    this.bankNumber = JSON.parse(
      window.localStorage.getItem('userInfo')
    ).member.bankNumber
    this.phone = JSON.parse(
      window.localStorage.getItem('userInfo')
    ).member.phone
    this.email = JSON.parse(
      window.localStorage.getItem('userInfo')
    ).member.email
    this.bd = JSON.parse(
      window.localStorage.getItem('userInfo')
    ).member.birthday
    this.etime = {}
    this.etime = this.bd.split(' ')
    this.birthday = this.etime[0]
    console.log(typeof this.birthday)
    this.deptname = JSON.parse(
      window.localStorage.getItem('userInfo')
    ).member.deptname
    this.value = JSON.parse(
      window.localStorage.getItem('userInfo')
    ).member.sex
    if (this.value === 1) {
      this.value = ['男']
    } else {
      this.value = ['女']
    }
    if (this.birthday === '') {
      this.birthday = this.birthday
    }
    this.$axios
      .post(
        apis + '/app/jobinfoapp/arealist',
        this.confusion(
          JSON.stringify({
            pid: '0'
          })
        ),
        {
          headers: {
            Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
            'Content-Type': 'application/json;charset=UTF-8',
            'Cache-Control': 'no-cache',
            isApp: 'isApp'
          }
        }
      )
      .then(response => {
        this.address = response.data
        this.address.forEach((ele, index) => {
          var pobj = {}
          var cArr = []
          pobj.v = JSON.stringify(ele.id)
          pobj.n = ele.simplename
          pobj.c = cArr
          var clists = ele.deptchildlist
          clists.forEach(item => {
            var cobj = {}
            cobj.v = JSON.stringify(item.id)
            cobj.n = item.simplename
            cArr.push(cobj)
          })
          this.arr.push(pobj)
        })
        // console.log(this.arr)
        // console.log(this.address)
      })
      .catch(error => {
        console.log(error)
        this.$dialog.toast({
          mes: '服务器异常'
        })
      })
  },
  methods: {
    go () {
      window.history.go(-1)
    },
    result2 (ret) {
      this.deptid = ret.itemValue2
      this.deptname = ret.itemName1 + ' ' + ret.itemName2
    },
    toggleTabs (index) {
      this.nowIndex = index
    },
    toggleTabs0 (index) {
      this.nowIndex0 = index
    },
    save () {
      // alert(123)SSS
      // return
      if (this.value.toString() === '男') {
        this.sex = '1'
      }
      if (this.value.toString() === '女') {
        this.sex = '2'
      }
      if (this.name === '') {
        this.$dialog.toast({
          mes: '请输入正确的姓名'
        })
        return false
      } else if (this.IdNumber === '' || !/^\d{17}(\d|x)$/i.test(this.IdNumber)) {
        this.$dialog.toast({
          mes: '身份证不正确'
        })
        return false
      } else if (this.BankUserName === '') {
        this.$dialog.toast({
          mes: '持卡人不能为空'
        })
        return false
      } else if (this.BankName === '') {
        this.$dialog.toast({
          mes: '开户行不能为空'
        })
        return false
      } else if (this.bankNumber === '') {
        this.$dialog.toast({
          mes: '卡号不正确'
        })
        return false
      } else if (this.birthday === '') {
        this.$dialog.toast({
          mes: '请填写生日'
        })
        return false
      } else if (this.value === '') {
        this.$dialog.toast({
          mes: '请填写性别'
        })
        return false
      } else if (this.deptname === '') {
        this.$dialog.toast({
          mes: '请填写学校'
        })
        return false
      } else if (this.phone === '') {
        this.$dialog.toast({
          mes: '手机号不正确'
        })
        return false
      } else if (this.email === '' || !(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(this.email))) {
        this.$dialog.toast({
          mes: '邮箱不正确'
        })
        return false
      } else {
        this.$axios
          .post(
            apis + '/app/jobinfoapp/edituser',
            this.confusion(
              JSON.stringify({
                name: this.name,
                IdNumber: this.IdNumber,
                cardholder: this.BankUserName,
                BankNumber: this.bankNumber,
                BankName: this.BankName,
                birthday: this.birthday,
                sex: this.sex,
                deptid: this.deptid,
                deptname: this.deptname,
                phone: this.phone,
                email: this.email
                // avatar: 头像地址
              })
            ),
            {
              headers: {
                Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
                'Content-Type': 'application/json;charset=UTF-8',
                'Cache-Control': 'no-cache',
                isApp: 'isApp'
              }
            }
          )
          .then(response => {
            // alert(123)
            var a = JSON.parse(localStorage.getItem('userInfo'))
            // console.log(a.member)
            a.member = response.data
            localStorage.setItem('userInfo', JSON.stringify(a))
            // console.log(localStorage.getItem('userInfo'))
            this.$dialog.toast({
              mes: '保存成功',
              callback: () => {
                window.history.go(-1)
              }
            })
            // console.log(response)
            // alert(this.deptid)
          })
          .catch(error => {
            console.log(error)
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      }
    }
  },
  components: {
    Group,
    Picker,
    Cell,
    Datetime,
    PopupPicker,
    apis
  }
}
</script>
<style scoped>
.userimg{
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
}
.userimg img{
  width: 100%;
  height: 100%;
}
.icon-back {
  font-size: 24px;
}
.Fcolor {
  color: #fff;
}
.release-right {
  font-size: 12px;
  color: #fff;
}
.goodsActive {
  background: #ffd602;
  color: #fff;
}
.goodsActive0 {
  background: #ffd602;
  color: #fff;
}
.user-avatar {
  font-size: 42px;
  color: #ffd602;
  width: 100%;
}
.hot {
  color: #ff2828;
  font-size: 13px;
}
/* 姓名->银行卡 提示信息 */
.from-wrapper >>> input::-webkit-input-placeholder {
  padding-right: 10px;
  font-size: 12px;
  text-align: end;
  color: #999;
}
/* 出生年月->手机号 提示信息 */
.from-wrapper >>> .yd-datetime-placeholder {
  position: absolute;
  margin-right: 3px;
  font-size: 12px;
  right: 21px;
  color: #999;
}
/* 右边箭头 */
.from-wrapper .yd-cell-arrow:after {
  font-size: 10px;
}
/* 性别 */
.sex {
  font-size: 12px;
  color: #999;
  background: none;
}
.sex-selection {
  display: flex;
  height: 150px;
  justify-content: space-around;
  align-items: center;
}
.picker-buttons {
  margin: 0 15px;
}
.span {
  width: 25%;
  height: 50px;
  float: left;
  line-height: 50px;
  text-indent: 18px;
  font-size: 15px;
  color: #333;
}
i {
  color: #ff2828;
  margin-right: 2px;
}
.vux-cell-primary {
  height: 50px;
}
.vux-cell-box {
  position: relative;
  width: 70%;
  height: 50px;
  padding: 0;
  line-height: 30px;
  float: right;
  font-size: 12px;
}
.vux-cell-primary {
  height: 32px;
}
.yd-cell-item:not(:last-child):after {
  border-bottom: none;
}
.yd-cell-box {
  margin: 0 !important;
  border-bottom: 1px solid #f1f1f1;
}
.i {
  color: #fff;
}
.dp-container {
  opacity: 0;
}
</style>
